<template>
  <div class="container">
    <h2>子组件 {{ modelValue }} <button @click="fn">改变数据</button></h2>
  </div>
</template>
<script>
export default {
  name: 'Son',
  props: {
    // Vue2 属性写法 - value 属性
    // value: Number
    // Vue3 属性写法 - modelValue 属性
    modelValue: Number,
  },
  setup(props, { emit }) {
    const fn = () => {
      // Vue3 触发事件 - 触发 update:modelValue 事件
      emit('update:modelValue', 100)
    }
    return { fn }
  },
  // Vue2 触发事件 - 触发 input 事件
  // methods: {
  //   fn() {
  //     this.$emit('input', 100)
  //   },
  // },
}
</script>
